<template>
	<view class="address-container">
		<!-- 头部区域 -->
		<headerSlotVue :propsColor="'#fff'">
			<template v-slot:header>
				<view class="header-content" @click="closePage()">
					<view class="header-left">
						<view class="back-btn">
							<text class="back-icon">←</text>
						</view>
					</view>
					<view class="header-center">
						<text class="page-title">我的地址</text>
					</view>
					<view class="header-right">
						<view class="header-actions">
							<text class="action-text">{{addressList.length}}个地址</text>
						</view>
					</view>
				</view>
			</template>
		</headerSlotVue>

		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 地址列表 -->
			<view class="address-list" v-if="addressList.length">
				<view class="address-item" @click="handleAddressClick(item)"
					:class="item.isDefault ? 'default-address' : ''" v-for="item in addressList" :key="item._id">
					<!-- 地址信息 -->
					<view class="address-info">
						<view class="address-header">
							<view class="receiver-info">
								<text class="receiver-name">{{item.receiver || item.userName || ''}}</text>
								<view class="default-badge flex" v-if="item.isDefault">
									<text class="badge-text">默认</text>
								</view>
							</view>
							<text class="receiver-phone">{{item.phone || item.userPhone || ''}}</text>
						</view>
						<view class="address-detail">
							<view class="region-info">
								<text
									class="region-text">{{(item.province || '') + ' ' + (item.city || '') + ' ' + (item.district || '')}}</text>
							</view>
							<view class="detail-info" v-if="item.detail || item.detailAddress">
								<text class="detail-text">{{item.detail || item.detailAddress}}</text>
							</view>
						</view>
					</view>

					<!-- 编辑按钮 -->
					<view class="edit-btn" @click.stop="goPage('/pages/mePages/address/editAddress?type=edit', item)">
						<text class="edit-icon">✏️</text>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-else>
				<view class="empty-icon">📍</view>
				<text class="empty-title">暂无地址</text>
				<text class="empty-desc">添加收货地址，享受便捷服务</text>
			</view>
		</view>

		<!-- 底部操作按钮 -->
		<view class="bottom-actions">
			<button class="add-address-btn" @click="goPage('/pages/mePages/address/editAddress?type=add')">
				<text class="btn-icon">+</text>
				<text class="btn-text">新增地址</text>
			</button>
		</view>
	</view>
</template>

<script>
	import headerSlotVue from '@/components/header-slot.vue';
	import {
		userAddress
	} from "@/api/mine.js"

	export default {
		components: {
			headerSlotVue,
		},
		data() {
			return {
				addressList: []
			};
		},
		onShow() {
			this.initAddress()
		},

		methods: {
			initAddress() {
				userAddress().then(res => {
					// 确保数据是数组，并且每个地址项都有必要的字段
					const addressData = res.data.data || [];
					this.addressList = addressData.map(item => ({
						_id: item._id || '',
						receiver: item.receiver || item.userName || '',
						userName: item.userName || item.receiver || '',
						phone: item.phone || item.userPhone || '',
						userPhone: item.userPhone || item.phone || '',
						province: item.province || '',
						city: item.city || '',
						district: item.district || '',
						detail: item.detail || '',
						detailAddress: item.detailAddress || '',
						isDefault: item.isDefault || false
					}));
				}).catch(err => {
					console.log('获取地址列表失败:', err);
					this.addressList = [];
				})
			},
			handleAddressClick(item) {
				const pages = getCurrentPages();
				const current = pages[pages.length - 1];
				if (current.options && current.options.select == 1) {
					// 拼接完整地址字段，并存储收件人和电话
					const fullAddress = (item.province || '') + (item.city || '') + (item.district || '') + (item.detail ||
						item.detailAddress || '');
					uni.setStorageSync('selectedAddress', {
						name: item.receiver || item.userName || '',
						phone: item.phone || item.userPhone || '',
						fullAddress,
						id: item._id
					});
					uni.navigateBack();
				} else {
					this.goPage('/pages/mePages/address/editAddress?type=edit', item);
				}
			},
			goPage(route, data) {
				if (data?._id) {
					uni.setStorageSync('address', data)
				}
				this.$router.smartNavigate({
					url: route
				})
			},
			closePage() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address-container {
		background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
		min-height: 100vh;
	}

	// 头部样式
	.header-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		width: 100%;

		.header-left {
			.back-btn {
				width: 64rpx;
				height: 64rpx;
				background: rgba(255, 255, 255, 0.9);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
				transition: all 0.3s ease;

				&:active {
					transform: scale(0.95);
					background: rgba(255, 255, 255, 1);
				}

				.back-icon {
					font-size: 32rpx;
					color: #333;
					font-weight: 600;
				}
			}
		}

		.header-center {
			flex: 1;
			text-align: center;

			.page-title {
				font-size: 36rpx;
				font-weight: 700;
				color: #333;
			}
		}

		.header-right {
			.header-actions {
				.action-text {
					font-size: 24rpx;
					color: #666;
					background: rgba(255, 255, 255, 0.8);
					padding: 8rpx 16rpx;
					border-radius: 20rpx;
				}
			}
		}
	}

	// 主要内容区域
	.main-content {
		padding: 32rpx;
		padding-bottom: 160rpx;
	}

	// 地址列表
	.address-list {
		.address-item {
			position: relative;
			background: white;
			border-radius: 20rpx;
			margin-bottom: 24rpx;
			padding: 32rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
			transition: all 0.3s ease;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;

			&:active {
				transform: scale(0.98);
				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.12);
			}

			&.default-address {
				border: 2rpx solid #FF6B35;
			}

			.address-info {
				flex: 1;
				margin-right: 24rpx;

				.address-header {
					margin-bottom: 12rpx;

					.receiver-info {
						display: flex;
						align-items: center;
						margin-bottom: 8rpx;

						.receiver-name {
							font-size: 32rpx;
							font-weight: 600;
							color: #333;
							margin-right: 12rpx;
						}

						.default-badge {
							background: linear-gradient(135deg, #FF6B35 0%, #FE6100 100%);
							color: white;
							padding: 4rpx 12rpx;
							border-radius: 12rpx;

							.badge-text {
								font-size: 20rpx;
								font-weight: 600;
							}
						}
					}

					.receiver-phone {
						font-size: 28rpx;
						color: #666;
					}
				}

				.address-detail {
					.region-info {
						margin-bottom: 8rpx;

						.region-text {
							font-size: 28rpx;
							color: #333;
							font-weight: 500;
							line-height: 1.4;
						}
					}

					.detail-info {
						.detail-text {
							font-size: 26rpx;
							color: #666;
							line-height: 1.5;
						}
					}
				}
			}

			.edit-btn {
				width: 64rpx;
				height: 64rpx;
				background: #f8f9fa;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.3s ease;
				flex-shrink: 0;

				&:active {
					background: #e9ecef;
					transform: scale(0.9);
				}

				.edit-icon {
					font-size: 28rpx;
				}
			}
		}
	}

	// 空状态
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 32rpx;

		.empty-icon {
			font-size: 120rpx;
			margin-bottom: 32rpx;
			opacity: 0.6;
		}

		.empty-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #666;
			margin-bottom: 16rpx;
		}

		.empty-desc {
			font-size: 26rpx;
			color: #999;
			text-align: center;
		}
	}

	// 底部操作按钮
	.bottom-actions {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 32rpx;
		background: white;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);

		.add-address-btn {
			width: 100%;
			height: 100rpx;
			background: linear-gradient(135deg, #FF6B35 0%, #FE6100 100%);
			border: none;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;

			&:active {
				transform: translateY(2rpx);
				background: linear-gradient(135deg, #FE6100 0%, #FF6B35 100%);
			}

			.btn-icon {
				font-size: 32rpx;
				color: white;
				font-weight: 700;
				margin-right: 8rpx;
			}

			.btn-text {
				font-size: 32rpx;
				color: white;
				font-weight: 600;
			}
		}
	}

	// 兼容旧样式
	.header_slot {
		padding: 0 32rpx;
		width: 100%;
		font-weight: 500;
		font-size: 36rpx;
		color: #2C2622;
	}

	.address_edit {
		padding: 32rpx;
		padding-bottom: 160rpx;

		.active {
			position: relative;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			border: 3rpx solid #FF6700;

			.address_icon {
				position: absolute;
				left: 0;
				top: 0;
				width: 56rpx;
				height: 56rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.address_edit_item {
		padding: 32rpx;
		margin-bottom: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 3rpx solid #F3F3F3;

		.address_item_title {
			margin-bottom: 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: rgba(0, 0, 0, 0.9);
			line-height: 48rpx;
			text-align: left;
		}

		.address_item_name {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: rgba(0, 0, 0, 0.6);
			line-height: 44rpx;
			text-align: left;
		}
	}

	.address_btn {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 32rpx;
		background: #fff;

		.cu-btn {
			width: 100%;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 48rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			background: #FF6700;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
		}
	}

	.empty {
		padding: 32rpx;
		text-align: center;
		width: 100%;
		height: 100%;
		color: rgba(0, 0, 0, 0.6);
	}
</style>